<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
			<style>
				*{
					margin: 0;
					padding: 0;
				}
				.box{
					width: 700px;
					height: 700px;
					margin: 100px;
					border: 1px solid #ccc;
					position: relative;
				}
				.big{
					width: 1200px;
					height: 1200px;
					position: absolute;
					top: 0;
					left: 720px;
					border: 1px solid #ccc;
					overflow: hidden;
					display: none;
				}
				.mask{
					width: 100px;
					height: 100px;
					background: rgba(255,255,0,0.4);
					position: absolute;
					top: 0;
					left: 0;
					/*鼠标的样式*/
					cursor: move;
					display: none;
				}
				.small{
					position: relative;
				}
				.big img{
					position: absolute;
					top: 0;
					left: 0;
				}
			</style>
		
	</head>
	<body>
		<div class="box" id="fdj">
			<!--小盒子的布局-->
			<div class="small">
				<img src="https://cdn2.chowsangsang.com/cneshop/images/p/k/15912k/EPCM15912GDK_9d5b32f7-8256-4a69-9c72-708306a96497_700.jpg"/>
				<div class="mask"></div>
			</div>
			<div class="big">
				<img src="https://cdn2.chowsangsang.com/cneshop/images/p/k/15912k/EPCM15912GDK_9d5b32f7-8256-4a69-9c72-708306a96497_1200.jpg"/>
			</div>
		</div>
		<script type="text/javascript">
			// 1. 获取外面的父级盒子
			var fdj = document.getElementById("fdj");
			// 2.获取小的图片
			var small = fdj.children[0];
			// 3.获取容纳大图片的盒子
			var big = fdj.children[1];
			// 4.获取遮罩
			var mask = small.children[1];
			// 5.获取大的那张图片
			var bigImage = big.children[0];
			
			// 6.鼠标经过小的图片的时候显示
			small.onmouseover = function(){
				mask.style.display = "block";
				big.style.display = "block";
			}
			// 7. 鼠标离开时隐藏
			small.onmouseout = function(){
				mask.style.display = "none";
				big.style.display = "none";
			}
			// 8 鼠标移动
			var x = 0;
			var y = 0;
			small.onmousemove = function(event){
		//		alert("youzemel ")
				var event = event || window.event;
				// 9.获取在盒子内部的坐标    本身定位了，这里换用父亲边框到body边框的距离  显示在遮罩的中间
				x = event.clientX - this.offsetParent.offsetLeft - mask.offsetWidth/2;
				y = event.clientY - this.offsetParent.offsetTop - mask.offsetHeight/2;
				console.log("x = ",x);
				console.log("y = ",y);
				// 10.增加限制条件
				if(x < 0){
					x = 0;
				}else if(x > small.offsetWidth - mask.offsetWidth){
					x = small.offsetWidth - mask.offsetWidth;
				}
				if(y < 0){
					y = 0;
				}else if(y > small.offsetHeight - mask.offsetHeight){
					y = small.offsetHeight-mask.offsetHeight;
				}
				mask.style.left = x + "px";
				mask.style.top = y + "px";
				// 11.利用倍数关系显示大图片 开始没有看懂为什么大图片要定位，后来想想只有定位的盒子才有top/left值
				bigImage.style.left = -x*big.offsetWidth/small.offsetWidth +"px";
				bigImage.style.top = -y*big.offsetHeight/small.offsetHeight + "px";
				
			}
			
		</script>
	</body>
</html>
